<template>
  <div class="edit">
    <a-modal v-model:visible="visible" title="编辑服务" @ok="onOk">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="合约名称" v-bind="validateInfos.definitionName">
          <a-input v-model:value="form.state.definitionName" placeholder="请输入" :maxlength="20" />
        </a-form-item>
        <a-form-item label="准入策略" v-bind="validateInfos.contractPolicyId">
          <a-select v-model:value="form.state.contractPolicyId" allowClear :options="strategyList" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="关联资产" v-bind="validateInfos.assetsSelector">
          <a-select v-model:value="form.state.assetsSelector" allowClear :options="assetList" mode="multiple" placeholder="请选择" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { Form, message } from 'ant-design-vue'
  import { computed, reactive, ref, watch } from 'vue'

  import { requestEditContract, requestSpaceAssetCatalogListByPage, requestStrategyList } from '/@/api/business/space'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  const props = defineProps({
    visible: { type: Boolean, default: false },
    data: { type: Object, default: () => {} },
  })

  const emits = defineEmits(['update:visible', 'success'])
  const visible = computed({
    get: () => props.visible,
    set: (val: boolean) => emits('update:visible', val),
  })

  watch(
    () => visible.value,
    (newVal, oldVal) => {
      if (newVal && !oldVal) {
        initData()
      }
    },
  )

  const initData = () => {
    resetFields()
    getAssetList()
    getStrategyList()
    // form.state = Object.assign({}, form.state, props.data)
    form.state.definitionName = props.data.privateProperties.definitionName
    form.state.contractPolicyId = props.data.contractPolicyId
    form.state.definitionId = props.data.id
    form.state.assetsSelector = props.data.assetsSelector
  }
  const assetList = ref([])
  const strategyList = ref([])
  /** 查询资产列表 */
  const getAssetList = async () => {
    const { responseCode, responseData } = await requestSpaceAssetCatalogListByPage({ pageIndex: 1, pageSize: 1000 })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      assetList.value = responseData.list.map((item) => ({
        label: item.catalogName,
        value: item.catalogId,
      }))
    }
  }
  /** 查询策略列表 */
  const getStrategyList = async () => {
    const { responseCode, responseData } = await requestStrategyList({ pageIndex: 1, pageSize: 1000 })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      strategyList.value = responseData.list
        .filter((item) => {
          return item.privateProperties
        })
        .map((item) => {
          return {
            label: item.privateProperties.policyName,
            value: item.definitionId,
          }
        })
      console.log(strategyList.value)
    }
  }
  /** 表单配置 */
  const form = reactive({
    state: props.data,
    rule: {
      definitionName: [{ required: true, message: '请输入合约名称' }],
      contractPolicyId: [{ required: true, message: '请选择策略' }],
      // assetsSelector: [{ required: true, message: '请选择关联资产' }],
    },
    searchSuccess: false,
    onUserPhoneSearch: () => validate('userPhone'),
  })
  const accessPolicyId = computed(() => form.state.contractPolicyId)

  const policyName = computed(() => {
    return strategyList.value.find((item) => item.value === accessPolicyId.value)?.label
  })

  /** 表单hook */
  const { validate, validateInfos, resetFields } = Form.useForm(form.state, form.rule)

  /**
   * 确定
   */
  const onOk = () => {
    validate()
      .then(async () => {
        const { responseCode } = await requestEditContract({ ...form.state, accessPolicyId: accessPolicyId.value, policyName: policyName.value })
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('添加成功')
          visible.value = false
          emits('success')
        }
      })
      .catch(() => {})
  }
</script>

<style lang="less" scoped>
  .logo {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    opacity: 0;
    cursor: pointer;
  }
</style>
